<!doctype html>
<html lang="zxx">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <link rel="stylesheet" href="/css/owl.theme.default.min.css">

    <link rel="stylesheet" href="/css/owl.carousel.min.css">

    <link rel="stylesheet" href="/css/remixicon.css">

    <link rel="stylesheet" href="/css/meanmenu.min.css">

    <link rel="stylesheet" href="/css/animate.min.css">

    <link rel="stylesheet" href="/css/style.css">

    <link rel="stylesheet" href="/css/responsive.css">

    <title>个人信息</title>
    <style>

        .navbar-category-dropdown {
            display: none; /* 默认隐藏 */
            position: absolute; /* 绝对定位脱离文档流 */
            z-index: 1000; /* 确保悬浮层在最上层 */
            background: #fff; /* 背景色防止透明 */
            box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* 添加阴影增强层次感 */
            min-width: 200px; /* 设置最小宽度避免内容挤压 */
        }

        .navbar-category:hover .navbar-category-dropdown {
            display: block; /* 鼠标悬停父容器时显示下拉层 */
        }

        .navbar-category-dropdown {
            opacity: 0;
            transition: opacity 0.3s ease;
            top: 100%; /* 下拉层紧贴父容器底部 */
        }
        .navbar-category:hover .navbar-category-dropdown {
            opacity: 1;
        }
    </style>
</head>
<body>
<input  type="hidden" id="userId" th:value="${session.USER_LOGIN.id}"/>
<div class="preloader">
    <div class="content">
        <div class="box"></div>
    </div>
</div>


<header class="header-area">
    <div class="top-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <ul class="header-left-content">
                        <li>
                            <a href="about.html">
                                关于我们
                            </a>
                        </li>
                        <li>
                            <a href="store-location.html">
                                店铺地址
                            </a>
                        </li>
                        <li>
                            需要帮助? Call:
                            <a href="tel:+1-(514)-321-4567">
                                <span>+1 (514) 321-4567</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-4">
                    <div class="header-right-content">
                        <ul>
                            <li>
                                <a href="/page/mycount">登录账号</a>
                            </li>
                            <li>
                                <a href="/page/dashboard">个人信息</a>
                            </li>
                            <li>
                                <div class="navbar-option-item navbar-option-language dropdown language-option">
                                    <button class="dropdown-toggle" type="button" id="language2"
                                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span class="lang-name">English</span>
                                    </button>
                                    <div class="dropdown-menu language-dropdown-menu" aria-labelledby="language2">
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/english.png" alt="Image">
                                            English
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/deutsch.png" alt="Image">
                                            Deutsch
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/china.png" alt="Image">
                                            简体中文
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/arbic.png" alt="Image">
                                            العربيّة
                                        </a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="middle-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-3">
                    <div class="logo">
                        <a href="">
                            <img src="/picture/logo.png" alt="Image">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="navbar-area only-home-one-sticky">
        <div class="mobile-responsive-nav">
            <div class="container">
                <div class="mobile-responsive-menu">
                    <!--  导航侧边栏  -->
                    <div class="logo">
                        <a href="">
                            <img src="/picture/logo.png" alt="logo">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="desktop-nav">
            <div class="container">
                <nav class="navbar navbar-expand-md navbar-light">
                    <div class="navbar-category">
                        <button type="button">
                            <i class="ri-menu-line"></i>
                            全部分类
                            <i class="arrow-down ri-arrow-down-s-line"></i>
                        </button>
                        <div class="navbar-category-dropdown">
                            <ul id="categorylist">
                            </ul>
                        </div>
                    </div>
                    <div class="collapse navbar-collapse mean-menu" id="navbarSupportedContent">
                        <ul class="navbar-nav">
                            <li class="nav-item float-end">
                                <a href="/page/index" class="nav-link active">
                                    首页
                                </a>
                            </li>
                            <li class="nav-item mega-menu">
                                <a href="/page/products" class="nav-link">
                                    全部商品
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="/page/dashboard" class="nav-link">
                                    个人信息管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="/page/cart" class="nav-link">
                                    我的购物车
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</header>


<div class="modal fade cart-shit" id="exampleModal-cart" tabindex="-1" aria-hidden="true">
    <div class="cart-shit-wrap">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close-btn" data-bs-dismiss="modal">
                        <i class="ri-close-fill"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <ul class="cart-list">
                        <li>
                            <img src="/picture/product-1.jpg" alt="Image">
                            <a href="shopping-cart.html">
                                DFMALB 20V Max XX Oscillating Multi Tool Variable Speed Tool
                            </a>
                            <span>$125.00</span>
                            <i class="ri-close-fill"></i>
                        </li>
                        <li>
                            <img src="/picture/product-2.jpg" alt="Image">
                            <a href="shopping-cart.html">
                                Power Tools Set Chinese Manufacturer Production 50V Lithu Battery
                            </a>
                            <span>$125.00</span>
                            <i class="ri-close-fill"></i>
                        </li>
                        <li>
                            <img src="/picture/product-3.jpg" alt="Image">
                            <a href="shopping-cart.html">
                                Electrical Magnetic Impact Power Hammer Drills Machine
                            </a>
                            <span>$125.00</span>
                            <i class="ri-close-fill"></i>
                        </li>
                        <li>
                            <img src="/picture/product-4.jpg" alt="Image">
                            <a href="shopping-cart.html">
                                Professional Cordless Drill Power Tools Set Competitive Price
                            </a>
                            <span>$125.00</span>
                            <i class="ri-close-fill"></i>
                        </li>
                    </ul>
                    <ul class="payable">
                        <li>
                            Payable total
                        </li>
                        <li class="total">
                            <span>$564.00</span>
                        </li>
                    </ul>
                    <ul class="cart-check-btn">
                        <li>
                            <a href="shopping-cart.html" class="default-btn">
                                View Cart
                            </a>
                        </li>
                        <li class="checkout">
                            <a href="checkout.html" class="default-btn">
                                Checkout
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="page-title-area">
    <div class="container">
        <div class="page-title-content">
            <ul>
                <li>
                    <a href="/page/index">
                        首页
                    </a>
                </li>
                <li class="active">个人信息</li>
            </ul>
        </div>
    </div>
</div>


<section class="dashboard-area ptb-54">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <ul class="dashboard-navigation">
                    <li>
                        <h3>分页</h3>
                    </li>
                    <li>
                        <a href="" class="active">个人信息</a>
                    </li>
                    <li>
                        <a href="/page/editprofile">修改个人信息</a>
                    </li>
                    <li>
                        <a href="/page/addaddress">新增地址</a>
                    </li>
                    <li>
                        <a href="/page/address">收货地址</a>
                    </li>
                    <li>
                        <a href="/page/password">修改密码</a>
                    </li>
                    <li>
                        <a href="/page/orders">订单信息</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-8">
                <div class="profile-bar">
                    <div class="row align-items-center">
                        <div class="col-lg-6 col-md-6">
                            <div class="profile-info">
                                <img src="" alt="Image" type="userpic" style="height: 80px;width: 80px">
                                <h3>
                                    <a type="nickname">昵称</a>
                                </h3>
                                <a type="tel">电话</a>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="edit-profiles">
                                <a href="/page/editprofile" class="default-btn">修改信息</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="billing-address-bar">
                    <div class="row align-items-center">
                        <div class="col-lg-4 col-md-6">
                            <h3>我的地址</h3>
                            <ul>
                                <li>姓名:
                                    <span type="addressname">姓名</span>
                                </li>
                                <li>
                                    地址:
                                    <span type="address">地址</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <ul>
                                <li>
                                    <a >电话号码:</a>
                                    <span type="addresstel"></span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="edit-address">
                                <a href="/page/editaddress" class="default-btn">修改地址</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="subscribe-area pt-54 pb-30">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-2">
                <div class="logo">
                    <a href="/page/index">
                        <img src="/picture/white-logo.png" alt="Image">
                    </a>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="subscribe-content">
                    <span>全部商品三折处理</span>
                    <h3>七天无理由退货,保障您的权益</h3>
                    <p>全场货物免费送运费险,让您退货无忧</p>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="copy-right-area">
    <div class="container">
        <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://www.downdemo.com">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
        </p>
    </div>
</div>


<div class="go-top">
    <i class="ri-arrow-up-s-fill"></i>
    <i class="ri-arrow-up-s-fill"></i>
</div>


<script src="/js/jquery.min.js"></script>

<script src="/js/bootstrap.bundle.min.js"></script>

<script src="/js/meanmenu.min.js"></script>

<script src="/js/owl.carousel.min.js"></script>

<script src="/js/wow.min.js"></script>

<script src="/js/range-slider.min.js"></script>

<script src="/js/form-validator.min.js"></script>

<script src="/js/contact-form-script.js"></script>

<script src="/js/ajaxchimp.min.js"></script>

<script src="/js/custom.js"></script>

<script src="/layui/layui.all.js"></script>

<!--侧边导航栏-->
<script type="text/html" id="categoryitem">
    <li style="text-align: center">
        <a href="#">{{name}}</a>
    </li>
</script>
<script>
    const userID= parseInt($('#userId').val(),10);

     $.ajax({
      url:'/page/getuser',
      success: function(result){
           $("[type=userpic]").attr("src",result.imgurl);
           $("[type=nickname]").text(result.nickname);
           $("[type=tel]").text(result.tel);
      }
     })

     $.ajax({
         url:'/address/getaddressbyuserid',
         data:{userid:userID},
         success:function (result) {
             console.log("用户ID是"+userID);
             $("[type=addressname]").text(result[0].name);
             console.log(result[0].name);
             $("[type=address]").text(result[0].province+result[0].city+result[0].area+result[0].address);
             $("[type=addresstel]").text(result[0].telephone);
         }
     })
</script>
<script>
    $.ajax({
        url: '/category/getchildren',
        data: {id: -1},
        success: function (result) {
            for (let i = 0; i < result.length; i++) {
                let item = $("#categoryitem").text();
                const $item = $(item);
                $item.find("a").text(result[i].name);
                $item.find("a").attr('href','/page/categoryproducts?pid='+result[i].id);
                $("#categorylist").append($item);
            }
        }
    });
</script>
</body>
</html>